<template>
  <div>
    <child-nav-bar title="学习成果认定积累信息" :queryParams="queryParams" @handleQuery="handleQuery" dialogTitle="按类别查询"
      :customLabel="true">
    </child-nav-bar>
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item, index) in  listData" :key="item.id">
        <template #title>
          <!-- <span>{{ item.s_number === undefined ? '' : '学号：' + item.s_number }}；</span> -->
          <span>{{ item.achievement_type === undefined ? '' : '类别：' + item.achievement_type.type_name }}；</span>
          <span>申请状态：</span>
          <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
          <span v-else-if="item.outcome == 1">审批中</span>
          <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
        </template>
        <template>
          <van-list>
            <van-cell :title="'序号：' + (index + 1)" />
            <van-cell>
              <template #title> {{ item.s_number === undefined ? '' : '学号：' + item.s_number }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.achievement_type === undefined ? '' : '类别：' + item.achievement_type.type_name }}
              </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.describe === undefined ? '' : '描述：' + item.describe }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.subTime === undefined ? '' : '提交日期：' + item.subTime }} </template>
            </van-cell>
            <van-cell>
              <template #title>
                <span>审核时间：</span>
                <span v-if="item.reviewTime">{{ item.reviewTime }}</span>
                <span v-else style="color: #ccc;">暂无</span>
              </template>
            </van-cell>
            <van-cell>
              <template #title>
                <span>审核人：</span>
                <span v-if="item.t_number">{{ item.t_number }}</span>
                <span v-else style="color: #ccc;">暂无</span>
              </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.scores === undefined ? '' : '成果积分：' + item.scores }} </template>
            </van-cell>
            <!-- 文件下载 -->
            <van-cell>
              <template #title>
                <span>下载文件：</span>
                <a v-if="item.uploadFile" :href="'http://localhost:8015/user/' + item.uploadFile"> 点击下载 </a>
                <span v-else style="color: #ccc;">暂无</span>
              </template>
            </van-cell>
            <van-cell>
              <template #title> <span>申请状态：</span>
                <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
                <span v-else-if="item.outcome == 1">审批中</span>
                <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
              </template>
            </van-cell>
          </van-list>
        </template>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import { identified, achievementTypeAll } from '@/api/student/achievementAPI'

export default {
  data() {
    return {
      activeNames: ['1'],
      listData: [],
      typeData: [], // 类别列表
      queryParams: {
        queryInput: undefined,
        queryItems: [],
        queryType: undefined
      }
    };
  },
  computed: {
    // 个人信新
    user() {
      return this.$store.getters.info
    }
  },
  created() {
    console.log(this.user);
    this.getAchievementData()
  },
  methods: {
    // 获取 成果认定信息
    async getAchievementData() {
      const { data } = await identified(this.user.username)
      this.listData = data
      // 成果类别表数据
      const res = await achievementTypeAll()

      let arr = res.data.map(d => {
        return {
          label: d.type_name,
          value: d.type_id
        }
      })

      this.queryParams.queryItems = [
        {
          children: arr,
          label: "类别",
          value: 'queryType'
        }
      ]

      // this.typeData = res.data
      // console.log(this.typeData);

    },


    /**
     * 查询
     */
    async handleQuery(e) {
      console.log('进入了查询方法');
      // 选中的类别 id
      const type_id = e.queryType
      const { data } = await identified(this.user.username)
      console.log(data);
      console.log(type_id);
      if (type_id) {
        this.listData = data.filter(item => item.achieve_type === type_id)
      } else {
        this.listData = data
      }
    }

  }
}

</script>
<style lang="less" scoped>
// a 标签样式
a {
  color: blue; /* 设置链接文本颜色为蓝色 */
  text-decoration: underline; /* 添加下划线 */
}
a:hover {
  color: red; /* 鼠标悬停时设置链接文本颜色为红色 */
  text-decoration: none; /* 鼠标悬停时去除下划线 */
}
</style>